<template>
    <el-card>
        <!--表单的搜索框
                       :inline  true表示表格中的框水平排放  false表示表格中的框竖直排放
                       :model 表示双向绑定表单数据-->
        <el-form :inline="true" :model="userFormData" ref="userFormRef" class="demo-form-inline">
            <el-form-item label="用户手机" prop="mobile" size="mini">
                <el-input v-model="userFormData.mobile"  placeholder="请输入用户手机"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname" size="mini">
                <el-input v-model="userFormData.nickname"  placeholder="请输入用户昵称"></el-input>
            </el-form-item>
            <el-form-item label="注册时间" prop="gmtCreate" size="mini">
                <el-date-picker
                        v-model="userFormData.gmtCreate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="状态:" prop="isDisabled" size="mini">
                <el-select v-model="userFormData.isDisabled" class="auto-width" clearable filterable placeholder="状态" style="width: 85px">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon="el-icon-search" type="primary" @click="searchUser">查询</el-button>
                <el-button icon="el-icon-refresh" @click="resetsearchUserForm()">重置</el-button>
            </el-form-item>
        </el-form>

        <!--数据表格-->
        <template>
            <el-table
                    :data="tableData"
                    :border="true"
                    stripe
                    ref="multipleTable"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        type="index"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="用户编号"
                        width="172px">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="用户手机">
                    <template slot-scope="scope">
                        <el-button type="text" @click="informationView(scope.row)">{{scope.row.mobile}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="nickname"
                        label="昵称">
                </el-table-column>
                <el-table-column
                        prop="gmtCreate"
                        label="注册时间">
                </el-table-column>
                <el-table-column
                        prop="userType"
                        label="用户类型">
                    <template slot-scope="scope">
                        <span v-if="scope.row.isType===0" >用户</span>
                        <span v-else>讲师</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="isDisabled"
                        label="状态">
                    <template slot-scope="scope">
                        <el-switch
                                :active-value="false"
                                :inactive-value="true"
                                style="display: block"
                                v-model="scope.row.isDisabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="正常"
                                inactive-text="禁用"
                                @change="isDisabledChange(scope.row)">
                        </el-switch>
                    </template>

                </el-table-column>
                <!--数据表格操作栏-->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页 2处
                  1.在数据区设置分页的所需的分页参数
                  2.定义页数改变和每页条数改变触发的函数-->
            <el-pagination
                    style="text-align: center;margin-top: 10px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[1, 3, 5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </template>

        <!--查看信息用户数据-->
        <el-dialog
                style="text-align: left"
                title="信息查看"
                :visible.sync="lookOverDialogVisible"
                width="42%">

            <el-card class="box-card">
                <el-divider>账户基础信息</el-divider>
                <el-form :label-position="labelPosition"  :inline="true" :model="accountInformation" class="demo-form-inline">
                    <el-row :gutter="20">
                        <el-col :span="9">
                            <el-form-item label="用户编号：" property="id" style="width: 400px">
                                {{accountInformation.id}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="6">
                            <el-form-item label="用户类型：" property="userType">
                                <span v-if="accountInformation.isType===0" >用户</span>
                                <span v-else>讲师</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="9">
                            <el-form-item label="　手机号：" property="mobile">
                                {{accountInformation.mobile}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="9" :offset="6">
                            <el-form-item label="昵称：" property="nickname">
                                {{accountInformation.nickname}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="9">
                            <el-form-item label="注册时间：" property="gmtCreate" style="width: 400px">
                                {{accountInformation.gmtCreate}}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="6">
                            <el-form-item label="状态：">
                                <span v-if="accountInformation.isDisabled===false" >正常</span>
                                <span v-else>禁用</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

            </el-card>
            <el-card class="box-card">
                <el-divider>用户基础信息</el-divider>

                <el-form :label-position="labelPosition"  :inline="true" :model="userInfo" class="demo-form-inline">
                    <el-row :gutter="20">
                        <el-col :span="15">
                            <el-form-item label="用户头像：" property="avatar">
                                <el-image :src="userInfo.avatar"  style="height: 120px;width: 120px">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="性别：">
                                <span v-if="userInfo.sex" >女</span>
                                <span v-else>男</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="6">
                            <el-form-item label="年龄：">
                                {{userInfo.age}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="备注：" style="width: 550px">
                                {{userInfo.remark}}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

            </el-card>

            <span slot="footer" class="dialog-footer">
                <el-button @click="lookOverDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <!--编辑表格
           dialog 对话框
               :visible.sync 表示对话框是否显示-->
        <el-dialog
                title="信息修改"
                :visible.sync="updataDialogVisible"
                width="30%"
                @close="updataClearForm">
            <!--修改用户表单的数据绑定
                    :model 表格数据
                    :rules 校验规则
                    ref 可用该属性获得该标签-->
            <el-form :model="updataUserFormData"   ref="updataUserFormRef"  label-width="70px" class="demo-ruleForm">
                <el-form-item label="用户手机号:" prop="mobile">
                    <el-input type="text" v-model="updataUserFormData.mobile"  disabled  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="昵称:" prop="nickname">
                    <el-input type="text" v-model="updataUserFormData.nickname"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="sex" style="text-align: left">
                    <el-radio-group v-model="updataUserFormData.sex" >
                        <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
                    <el-input type="textarea" v-model="updataUserFormData.remark"  autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updataDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updataUser">确 定</el-button>
            </span>
        </el-dialog>

    </el-card>
</template>

<script>
    export default {
        name: "StudentList",
        data(){
            return{
                /*查看用户数据的弹出框信息*/
                //表单lable右侧侧对齐
                labelPosition:'left',
                //与visible.sync进行双向绑定，用于控制dialog是否显示 false不显示 true显示
                lookOverDialogVisible:false,
                //账户基本信息表单数据
                accountInformation:{
                    id:'',
                    isType:'',
                    mobile:'',
                    nickname:'',
                    gmtCreate:'',
                    isDisabled:''
                },
                //用户基本信息表单数据
                userInfo:{
                    avatar:'',
                    sex:'',
                    age:'',
                    remark:''
                },

                /*修改表单的数据*/
                updataUserFormData:{
                    mobile:'',
                    nickname:'',
                    sex:'',
                    remark:''
                },
                //与visible.sync进行双向绑定，用于控制dialog是否显示 false不显示 true显示
                updataDialogVisible:false,

                /*表格数据*/
                tableData:[],
                /* 数据表格的分页数据*/
                currentPage: 1,   //当前页数
                total:0,    //总条数
                pageSize:5, //每页显示的条数

                /*搜索表单*/
                userFormData:{
                    mobile:'',
                    nickname:'',
                    isDisabled:'',
                    gmtCreate:[],
                },
                //快捷项
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                //状态的下拉选项
                options: [{
                    value: '1',
                    label: '禁用'
                }, {
                    value: '0',
                    label: '正常'
                },],
            }

        },
        created() {
            //初始化数据表格
            this.inintUserTable();
        },
        methods:{
            //用户状态发生改变
            isDisabledChange(val){
                var that=this;
                this.$http.post(`/student/member/stateChange/${val.isDisabled}/${val.id}`).then(function (resp) {
                    if (resp.data.code===2000){
                        that.$message.success(resp.data.msg)
                        that.inintUserTable()
                    }
                })
            },
            //点击手机号弹出信息查看
            informationView(val){
                this.lookOverDialogVisible = true;
                this.accountInformation=val
                this.userInfo=val
            },
            //每次关闭编辑对话框时清楚添加表单中的数据
            updataClearForm(){
                this.$refs.updataUserFormRef.resetFields();
            },
            //修改提交方法
            updataUser(){
                var that = this;
                //表单验证通过才能提交表单数据
                this.$refs.updataUserFormRef.validate((valid) => {
                    if (valid){
                        this.$http.post(`/student/member/modifyStudentInformation`,this.updataUserFormData).then(function (result) {
                            if (result.data.code == 2000) {
                                that.$message.success(result.data.msg);
                                that.updataDialogVisible = false;
                                that.inintUserTable();
                            }
                        });
                    }
                })
            },

            /*请求数据表格的数据，即查询用户信息
         *       1.创建数据表格的格式
         *       2.在created 设置初始化时调用数据表格发送请求的方法*/
            inintUserTable(){
                var that =this;
                this.$http.post(`/student/member/getStudentAll/${this.currentPage}/${this.pageSize}`,this.userFormData).then(function (resp) {
                    if (resp.data.code===2000){
                        that.tableData=resp.data.result.records;
                        that.total=resp.data.result.total;

                    }
                })
            },
            //编辑修改按钮
            handleEdit(index,val){
                this.updataDialogVisible = true;
                //延迟效果
                this.$nextTick(()=>{
                    //将表格数据抽取出来在赋值给表单数据
                    this.updataUserFormData = Object.assign({}, val);
                })
            },
            /*显示条数的数量改变时触发的函数
            *    当分页的显示条数发生改变时将参数赋值给对应pageSize数据对象
            *    并调用方法重新刷新数据*/
            handleSizeChange(val) {
                this.pageSize=val;
                this.inintUserTable();
            },
            /*分页的页数改变时的触发的函数
            *    当分页的页数发现改变时将参数赋值个对应的currentPage数据对象
            *    并调用方法重新刷新数据*/
            handleCurrentChange(val) {
                this.currentPage=val;
                this.inintUserTable();
            },
            //搜索用户信息
            searchUser(){
                this.inintUserTable();
            },
            //搜索表单重置按钮
            resetsearchUserForm(){
                this.$refs.userFormRef.resetFields();
                this.inintUserTable()
            },
        }

    }
</script>

<style scoped>

</style>
